<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-input
          clearable
          @clear="search()"
          v-model="pageDto.where.name"
          placeholder="请输入租户名"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input
          clearable
          @clear="search()"
          v-model="pageDto.where.accessKey"
          placeholder="请输入租户key"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-search" type="primary" @click="search()"
          >查询</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-delete" @click="deleteItem()" type="danger"
          >清空</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="tenantList" stripe style="width: 100%">
      <el-table-column prop="name" label="租户名"> </el-table-column>
      <el-table-column prop="accessKey" label="租户key"> </el-table-column>
      <el-table-column prop="companyName" label="公司名称"> </el-table-column>
      <el-table-column prop="companyCode" label="执照编号"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="enable" label="是否可用">
        <template slot-scope="scope">
          {{ scope.row.enable == 1 ? "可用" : "不可用" }}
        </template>
        <!-- <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark"> {{ item.label }}
             </el-tag> -->
      </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column prop="auditStatus" label="状态">
        <template slot-scope="scope">
          {{ scope.row.auditStatus == 1 ? "通过" : "不通过" }}
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="open(scope.row)">
            {{ scope.row.enable == 1 ? "禁用" : "启用" }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDto.now"
      :page-sizes="[5, 15, 50, 100]"
      :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { page, update } from "@/api/tenant";
export default {
  data() {
    return {
      //分页
      pageDto: {
        now: 1,
        size: 5,
        where: {
          name: "",
          accessKey: "",
        },
      },
      total: 0,
      tenantList: [],
      //   tenant: {
      //     name:"",
      //     accessKey:"",
      //     companyName:"",
      //     companyCode:"",
      //     phone:"",
      //     enable:"",
      //     description:"",
      //     auditStatus:"",
      //   }
      // items: [
      //       { type: 'success', label: '可用' },
      //       { type: 'danger', label: '不可用' },
      //     ]
    };
  },
  methods: {
    handleSizeChange(size) {
      this.pageDto.size = size;
      this.search();
    },
    handleCurrentChange(now) {
      this.pageDto.now = now;
      this.search();
    },
    search() {
      page(this.pageDto).then((res) => {
        console.log(res);
        this.tenantList = res.list;
        this.total = res.total;
      });
    },
    deleteItem() {
      this.pageDto.where.name = "";
      this.pageDto.where.accessKey = "";
      this.search();
    },
    open(row) {
      var enable = row.enable == 1 ? "禁用" : "启用";
      this.$confirm("你确定要" + enable + "该租户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        update(row).then((res) => {
          if (res.ok) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
          this.search();
        });
      });
    },
  },
  created() {
    this.search();
  },
};
</script>
<style lang="css"></style>
